<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>webrx</title>
    <style>
        .t td, .t th {
            padding: 5px;
            text-align: center;
            border: 1px dashed gray;
        }

        .t {
            margin: 0 auto;
            width: 60%;
            border-collapse: collapse;
        }

        .t > tbody > tr:hover {
            cursor: pointer;
            background-color: #ffe591;
        }
    </style>
</head>
<body>
<table class="t">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
    //获取table标签元素
    let t = document.querySelectorAll('table>tbody')[0]

    //本页面地址 http://localhost:63342/php24/ch13/fdemo.html
    //fetch get 请求 api.php 显示数据库zgdb t_user id name
    //api.php 同域
    //http://localhsot/api.php 跨域
    fetch('http://localhost/api.php').then(res => res.json()).then(res => {
        t.innerHTML = ''
        for (const re of res['data']) {
            console.log(re.id)
            t.innerHTML += `<tr><td>${re.id}</td><td>${re.name}</td><td>${re.score}</td><td><a href="">删除</a></td></tr>`
        }
    })
</script>
</body>
</html>